<template>
  <div class="userContent">
    <el-card style="background: black;">
      <el-form ref="formRef" :rules="rules" label-width="120px">
        <el-form-item label="用户名称：" prop="selectValue" label-width="100px">
          <el-input
            v-model="user"
            placeholder="请输入20个字以内的用户名称"
            maxlength="20"
            style="width: 300px;height: 40px;margin-right: 20px;"
          >
          </el-input>
          <el-button style="width: 100px;height: 40px;" type="warning" @click="userSelect">查询</el-button>
          <el-button style="width: 100px;height: 40px;" type="danger" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="userMain">
      <el-card style="background: black;">
        <div class="content">
          <el-button
            icon="Plus"
            style="width: 120px;height: 50px;margin-bottom: 20px;"
            type="warning"
            @click="reset"
          >
            新增
          </el-button>
          <el-table
            :data="tableData"
            id="table"
            row-key="id"
            style="width: 100%;"
          >
            <el-table-column type="index" label="序号" align="center" width="60">
              <template #default="scope">
                {{ (currentPage - 1) * pagesize + scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="用户名称" align="center" prop="userName">
            </el-table-column>
            <el-table-column label="用户角色" align="center" prop="userRole">
            </el-table-column>
            <el-table-column label="操作人" align="center" prop="updateName">
              <template #default="{ row }">
                {{ row.updateName || row.createName }}
              </template>
            </el-table-column>
            <el-table-column
              label="操作时间"
              align="center"
              prop="updateTime"
              sortable
            >
            <template #default="{ row }">
              {{ row.updateTime || row.createTime }}
            </template>
            </el-table-column>
            <el-table-column label="操作" width="200" fixed="right" align="center">
              <template #default="{ row }">
                <el-dropdown>
                  <span class="el-dropdown-link" @click.stop="() => false">
                    更多
                    <el-icon>
                      <CaretBottom />
                    </el-icon>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item
                        @click="editRole(row)"
                      >
                        编辑
                      </el-dropdown-item>
                      <el-dropdown-item
                        @click="allotMenu(row)"
                      >
                        分配菜单
                      </el-dropdown-item>
                      <el-dropdown-item
                        @click="allotPermission(row)"
                      >
                        分配权限
                      </el-dropdown-item>
                      <el-dropdown-item
                        @click="delTableRow(row)"
                      >
                        删除
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pagesize"
            background
            :total="total"
            :page-sizes="[5, 10, 20, 50]"
            layout="sizes, total, -> ,prev, pager, next, jumper"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            small
          />
        </div>
      </el-card>
    </div>
  </div>
</template> 

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { FormRules, FormInstance } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/utils/request'
import { use } from 'echarts'

const route = useRoute()
const router = useRouter()

const currentPage = ref<number>(1)
const pagesize = ref<number>(5)
const total = ref<number>(0)

const formRef = ref<FormInstance>()

const user = ref<any>('')
const tableData = ref<any[]>([])

const rules = ref<FormRules>({})


const handleCurrentChange = (curPage: number) => {
  currentPage.value = curPage
}

const handleSizeChange = (size: number) => {
  pagesize.value = size
}

const userSelect = () => {
  total.value = tableData.value.length
}

const reset = () => {
  user.value = '' 
  currentPage.value = 1
  pagesize.value = 5
  userSelect()
}

onMounted(() => {

})

</script>

<style lang="scss" scoped>
.userContent {
  width: 100%;
  padding: 20px;


  .el-card {
    border-radius: 16px;
    box-shadow: 0px 4px 18px 0px rgba(248,216,82, 0.9);
    :deep(.el-input__wrapper) {
      width: 300px;
      height: 40px;
    }
  }

  .userMain {
    margin-top: 20px;

    .el-card {
      border-radius: 16px;
      box-shadow: 0px 4px 18px 0px rgba(248,216,82, 0.9);

      .content {
        .el-dropdown-link {
          color: rgb(248,216,82);
        }

        .el-dropdown-link:focus {
          outline: none;
        }

      }
      .pagination {
        margin-top: 20px;
        // display: flex;
        // justify-content: end;
      }

      :deep(.el-pagination__sizes) {
        margin-right: 0;
        margin-left: 10px;
      }

    // :deep(.number) {
    //   border: 1px solid #dddddd !important;
    //   background-color: #ffffff !important;
    // }

    // :deep(.is-active) {
    //   background-color: #ffffff !important;
    //   border: 1px solid #dc402b !important;
    //   color: #dc402b !important;
    // }
    // :deep(.number:hover) {
    //   color: #dc402b !important;
    // }

    // :deep(.btn-prev) {
    //   background-color: #ffffff !important;
    //   border: 1px solid #dddddd;
    // }
    // :deep(.btn-next) {
    //   background-color: #ffffff !important;
    //   border: 1px solid #dddddd;
    // }
    // :deep(.btn-prev:hover) {
    //   color: #dc402b !important;
    // }
    // :deep(.btn-next:hover) {
    //   color: #dc402b !important;
    // }
    // :deep(.el-table__header) {
    //   background-color: #edeef0;
    // }
    }
  }
}
</style>